<template>
	<view>
		<view class="headPicture">
			<image src="../../static/background/headBackground.jpg" mode=""></image>
		</view>
		<view class="container">
			<image class="background" src="https://gd-hbimg.huaban.com/c46ef03b3a30d53d99f07f7971833156763c0b33ff218-xHtCAs_fw480webp" mode=""></image>
			
			<view class="subRcordButton">补录申请</view>
			
			<view class="groupButton">补录群</view>
			
			<view class="groupBox">
				志愿工作群
				<image src="../../static/img/二维码.png" mode=""></image>
			</view>
			
			<view class="bottomText">注：提交补录申请并进群，月底统一补录志愿时长。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.headPicture{
		width: 100%;
		height: 296rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.container{
		width: 100%;
		min-height: 1037rpx;
		position: absolute;
		top: 253rpx;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-color: #fff;
		z-index: 1;
		padding-top: 55rpx;
		.subRcordButton{
			width: 64%;
			height: 100rpx;
			text-align: center;
			background-color: #51B4FA;
			margin: auto;
			font-size: 20px;
			color: #fff;
			line-height: 50px;
			margin-bottom: 80rpx;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
		}
		.groupButton{
		    width: 40%;
		    height: 82rpx;
		    text-align: center;
		    background-color: #F0F5FF;
		    margin: auto;
		    font-size: 17px;
		    line-height: 41px;
		    margin-bottom: 80rpx;
		    border-radius: 10px;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
		}
		.groupBox{
			height: 339rpx;
		    text-align: center;
		    background-color: #51B4FA;
		    margin: auto;
		    font-size: 14px;
		    display: flex;
		    color: #fff;
		    flex-direction: column;
		    align-items: center;
		    margin-bottom: 80rpx;
		    width: 48%;
		    padding-top: 10rpx;
		    border-radius: 16rpx;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
			image{
			    width: 303rpx;
			    height: 265rpx;
			    margin-top: 6rpx;
			}
		}
		.bottomText{
		    width: 59%;
		    height: 100rpx;
		    margin: auto;
		    font-size: 14px;
		    margin-top: 124rpx;
		}
		
		.background{
			width: 100%;
			height: 1037rpx;
			position: absolute;
			top: 1rpx;
			opacity: 0.6;
			z-index: 0;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
		}
	}
</style>
